import { Button, Flex, Form, Input, Select } from "antd"
import { useSelector } from "react-redux"
import type { ROOTSTATE } from "../store"
import { useEffect, useState } from "react"
import { type IDomEditor, type IEditorConfig, type IToolbarConfig } from "@wangeditor/editor"
import type { RESPONSE } from "../types/base"
import { Title } from "../components/Title"
import { Editor, Toolbar } from "@wangeditor/editor-for-react"
import "@wangeditor/editor/dist/css/style.css"
import type { IssueForm } from "../types/issue"
import { reqAddIssue } from "../api/issue"
import {  useNavigate } from "react-router"

export const IssueEdit = () => {
    const typeList = useSelector((state: ROOTSTATE) => state.typeStore.typeList)
    const options = typeList.map((item) => {
        return {
            value: item._id,
            label: item.typename
        }
    })

    const [editor, setEditor] = useState<IDomEditor | null>(null)
    const [html, setHtml] = useState("<p>hello</p>")

    const toolbarConfig: Partial<IToolbarConfig> = {}
    type InsertFnType = (
        url: string,
        alt: string | null,
        herf: string | null
    ) => void
    const editorConfig: Partial<IEditorConfig> = {
        MENU_CONF: {
            uploadImage: {
                fieldName: "file",
                server: "/dev-api/api/upload",
                customInsert(res: RESPONSE<string>, insertFn: InsertFnType) {
                    console.log('res', res);
                    insertFn(res.data, "", "")
                }
            }
        },
        placeholder: "请输入内容。。。"
    }

    useEffect(() => {
        return () => {
            if (editor == null) return
            editor.destroy()
            setEditor(null)
        }
    }, [editor])
    
    const user =useSelector((state:ROOTSTATE) => state.userStore.user)
    const navigate =useNavigate()
    //发布问题
    const sendIssue =async (Issue:IssueForm)=>{
        await reqAddIssue (Issue)
        navigate("/issue")
    }
    

    return (
        <Flex vertical gap={30}>
            <Title title="提问模块"></Title>
            <Form layout="vertical"
                onFinish={(value) => {
                   sendIssue({
                    ...value,
                    content:html,
                    userId:user._id
                   })
                }}
            >
            <Form.Item
                label="文章标题"
                name="title"
                rules={[
                    { required: true, message: "填写文章标题" },
                    { max: 50, message: "最大长度为50" }
                ]}>
                <Input></Input>
            </Form.Item>

            <Form.Item
                label="文章类别"
                name="typeId"
                rules={[
                    { required: true, message: "选择文章类别" },
                ]}>
                <Select options={options} style={{ width: 150 }}></Select>
            </Form.Item>

            <Form.Item label="文章内容">
                <div style={{ border: "1px solid #ccc", zIndex: 100 }}>
                    <Toolbar editor={editor}
                        defaultConfig={toolbarConfig}
                        mode="default"
                        style={{ borderButton: "1px solid #ccc" }}>
                    </Toolbar>
                    <Editor
                        defaultConfig={editorConfig}
                        value={html}
                        onCreated={setEditor}
                        onChange={(editor) => setHtml(editor.getHtml())}
                        mode="default"
                        style={{ height: "500px", overflowY: "hidden" }}>
                    </Editor>
                    <div>{html}</div>
                    <Form.Item label={null}>
                        <Flex gap={30}>
                            <Button type="primary" htmlType="submit" >
                                确认发布
                            </Button>
                            <Button>重置</Button>
                        </Flex>
                    </Form.Item>

                </div>
            </Form.Item>
            </Form>
        </Flex>
    )
}